<%-- 
    Document   : graph
    Created on : 03-dic-2013, 0:49:01
    Author     : Natalia
--%>
<%@page import="beans.Controlador"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
              var info = document.getElementById('hidden').value;
              var datos = info.split('@');
              //alert(datos);
              var array = [['ID', '', '', 'Comercio',  'Compra Media(€)']];
              var j = 0;
              for(var i=0;i<datos.length-1;i++){
                  //array.push(4);
                  var a = datos[i].split('#');
                  array.push([a[0],i+1,i+1,a[0],parseFloat(a[1])]);
                  j++;
              }  
              
              array.push(['',j+1,j+1,'Unknown',0]);
                
              var data = google.visualization.arrayToDataTable(array);

              var options = {
                title: 'Valor Promedio por Sectores según tus preferencias.',
                hAxis: {title: ''},
                vAxis: {title: ''},
                bubble: {textStyle: {fontSize: 11}}
              };

              var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
              chart.draw(data, options);
            }
          </script>
    </head>
    <body>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
        <input id="hidden" type="text" name="hidden" value="<%= Controlador.GetInstance().getS_DatosConsumoZipCodeByUsuario() %>" style="display: none">
    </body>
</html>
